<template>
    <div class="body">
        <div class="node-container">
            <div class="banner">
                <div class="banner-info-box">
                    <h4>Obtain node qualifications</h4>
                    <span>Spend [BTC, ETH, BNB, USDT] (ZTC) on <br>any asset to replace the node
                        qualifications</span>
                    <br>
                    <div class="button-group">
                    <button class="banner-button-one">Download</button>
                    <button class="banner-button-two">Replace ZTC</button>
                </div>
                </div>
            </div>
            <div class="body-info">
                <div class="node-flex">
                    <div class="body-info-flex">
                        <div class="body-info-title">
                            <img src="@/assets/img/huangguan.png" alt=""><span>High Weight Node</span>
                        </div>
                        <div class="body-info-subject">
                            <div class="body-info-subject-flex">
                                <div>
                                    <h5>·Rights and interests</h5>
                                    <p>Project airdrop, participation in POS consensus, ZTC-NFT rewards, etc.</p>
                                </div>
                                <div>
                                    <h5>·ZTC output</h5>
                                    <p>POS mining allocation based on participating ZTC weights.</p>
                                </div>
                            </div>
                            <div class="yuanlogo"><span>Price：</span><span class="amount"> 2,500,000 </span> <img
                                    src="@/assets/img/yuanlog.png" alt=""> <span>ZTC</span></div>
                            <button class="buy-button">Buy</button>
                        </div>
                    </div>

                    <div class="body-info-flex">
                        <div class="body-info-title">
                            <img src="@/assets/img/huangguan.png" alt=""><span>High Weight Node</span>
                        </div>
                        <div class="body-info-subject">
                            <div class="body-info-subject-flex">
                                <div>
                                    <h5>·Rights and interests</h5>
                                    <p>Project airdrop, participation in POS consensus, ZTC-NFT rewards, etc.</p>
                                </div>
                                <div>
                                    <h5>·ZTC output</h5>
                                    <p>POS mining allocation based on participating ZTC weights.</p>
                                </div>
                            </div>
                            <div class="yuanlogo"><span>Price：</span><span class="amount"> 2,500,000 </span> <img
                                    src="@/assets/img/yuanlog.png" alt=""> <span>ZTC</span></div>
                            <button class="buy-button">Buy</button>
                        </div>
                    </div>
                </div>
                <div class="board">
                    <div class="board-box">
                        <div class="board-title">
                          <h5>Dash Board</h5>
                        </div>
                        <div class="board-list">
                             <div class="title">
                                <div class="banxin-title">
                                    <h5>Type</h5><h5>State</h5>
                                </div>
                             </div>
                             <div class="banxin">
                                    <span>Node client</span><span style="color: rgb(39, 179, 72); font-weight: 700;">Running</span>
                                </div>
                                <div class="banxin">
                                    <span>Weight ratio</span><span style="font-weight: 700;">0.25%</span>
                                </div>
                                <div class="banxin">
                                    <span>Today’s ZTC output</span><span style="font-weight: 700;">3000</span>
                                </div>
                                <div class="banxin">
                                    <span>Total output today</span><span style="color: rgb(39, 179, 72); font-weight: 700;">3000000</span>
                                </div>
                                <div class="banxin">
                                    <span>Number of nodes in the entire network</span><span style="font-weight: 700;">30123</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>

export default {
  mounted () {
    // 组件挂载后设置body的背景色为黑色
    document.body.style.backgroundColor = 'black'
  }
}
</script>

<style scoped lang="less">
@import '@/assets/css/node/node-min992.less';
@import '@/assets/css/node/node-min768.less';
@import '@/assets/css/node/node-max768.less';

</style>
